<template>
  <div>
      <div class="head">
          <div class="img_box">
              <img :src="userimg" alt="">
          </div>
          <h4 class="username">零壹</h4>
      </div>
      <div class="wrapper">
          <div class="form_group">
              <label for="" class="form_lable">实名验证</label>
              <div class="form_input border-bottom-1px">
                  <cube-input
                      v-model="shiming.value"
                      :placeholder="shiming.placeholder"
                      :type="shiming.type"
                      :maxlength="shiming.maxlength"
                      :readonly="shiming.readonly"
                      :disabled="shiming.disabled"
                      :autofocus="shiming.autofocus"
                      :autocomplete="shiming.autocomplete"
                      :eye="shiming.eye"
                      :clearable="shiming.clearable"
                    ></cube-input>
              </div>
          </div>
          <div class="form_group">
              <label for="" class="form_lable">手机号码</label>
              <div class="form_input border-bottom-1px">
                  <cube-input
                      v-model="mobile.value"

                    ></cube-input>
              </div>
          </div>
          <div class="form_group">
              <label for="" class="form_lable">验证码</label>
              <div class="form_input border-bottom-1px">
                  <div class="form_input_box">
                      <cube-input
                          v-model="mobile.value"

                        ></cube-input>
                  </div>
                  <div>
                      <a href="javascript:;" class="form_btn">发送验证码</a>
                  </div>
              </div>
          </div>
          <a href="javascript:;" class="comfirm_btn" :style="comfirm_btn_bg">确定</a>
      </div>

  </div>
</template>
<script>
import userimg from '@/assets/lingyi_logo@2x.png'
export default {
    data(){
        return{
            comfirm_btn_bg:{
                backgroundImage: "url(" + require("../../assets/page6_btn_confirm@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            userimg:userimg,
            shiming:{
                value: 'sdfs',
                placeholder: '请输入内容',
                type: 'text',
                readonly: false,
                maxlength: 250,
                disabled: false,
                autofocus: true,
                autocomplete: true,
                // eye: {
                //     open: true,
                //     reverse: false
                // },
                clearable:{
                    visible: true,
                    blurHidden: true
                }
            },
            mobile:{
                value:""
            }
        }
    },
    methods:{

    }
}
</script>
<style scoped>
.head{
    margin-top: 1.2rem;
}
.head .img_box{
    width: 3.14rem;
    height: 3.14rem;
    margin: 0 auto;
    border-radius: 50%;
    border: .1rem solid #ffffff;
    box-shadow: 0 0.16rem 0.24rem #dadada;
}
.head .img_box img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.head .username{
    font-size: .64rem;
    font-weight: 500;
    color: #252525;
    margin-top: .28rem;
}
.head  .user_info p{
    font-size: .6rem;
    color: #383838;
    font-weight: 500;
    margin-top: .2rem;
}
.wrapper{
    margin-top: .6rem;
}
.wrapper .form_group{
    display: flex;
    align-items: center;
    height: 1.76rem;
    padding-right: 1.16rem;
}
.wrapper .form_group .form_lable{
    width: 3.72rem;
    flex: none;
    text-align: right;
    font-size: .6rem;
    color: #363636;
    font-weight: 600;
}
.wrapper .form_group .form_input{
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
}
.wrapper .form_group .form_input > input{
    height: 100%;
    flex: 1;
    border: none;
}
.wrapper .form_group .border-bottom-1px::after{
    border-color: #E1E1E1;
}
.cube-input::after{
    border: none;
}
.wrapper .form_group .form_btn{
    width: 2.74rem;
    background: #EBEBEB;
    border-radius: .16rem;
    padding: .16rem .2rem .24rem .24rem;
}
.wrapper .form_group .form_input_box{
    flex: 1;
}
.comfirm_btn{
    display: block;
    font-size: .64rem;
    color: #FFFFFF;
    font-weight: 600;
    width: 13.4rem;
    height: 2.64rem;
    line-height: 2rem;
    padding: 0;
    background: none;
    border: none;
    margin: 4.74rem auto 0 auto;
    letter-spacing: 2px;
}
</style>
